<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <!-- 1.基本样式 -->
    <style>
      html,
      body,
      div,
      span,
      applet,
      object,
      iframe,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      blockquote,
      pre,
      a,
      abbr,
      acronym,
      address,
      big,
      cite,
      code,
      del,
      dfn,
      em,
      font,
      img,
      ins,
      kbd,
      q,
      s,
      samp,
      small,
      strike,
      strong,
      sub,
      sup,
      tt,
      var,
      b,
      u,
      i,
      center,
      dl,
      dt,
      dd,
      ol,
      ul,
      li,
      fieldset,
      form,
      label,
      legend,
      table,
      caption,
      tbody,
      tfoot,
      thead,
      tr,
      th,
      td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
      }
      html,
      body {
        width: 100%;
        position: relative;
      }
      #banner {
        position: absolute;
        min-width: 100%;
        min-height: 500px;
        height: auto;
        width: auto;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: -10;
        background-image: url(./images/banBj.jpeg);
        background-repeat: no-repeat;
        background-position: center;
      }
      .maxCon {
        height: 500px;
        width: 100%;
        max-width: 1200px;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
      }
    </style>

    <!-- 2.图片布局样式 -->
    <style>
      /* 舞台 */
      .EsMove {
        position: absolute;
        right: 0;
        top: 0;
        width: 460px;
        height: 500px;
      }

      /* 子元素 */
      .EsMove .bj {
        position: absolute;
        left: 0;
        bottom: 0;
      }

      .EsMove .houLiang {
        position: absolute;
        opacity: 0;
      }

      .EsMove .houLiangA {
        top: 244px;
        left: 92px;
        animation: houLiangA 1.2s infinite;
      }

      .EsMove .houLiangB {
        position: absolute;
        top: 226px;
        left: 306px;
        animation: houLiangA 2.8s infinite;
      }

      .EsMove .houLiangC {
        position: absolute;
        top: 226px;
        left: 337px;
        animation: houLiangA 2s infinite;
      }

      .EsMove .leftAn {
        position: absolute;
        top: 352px;
        left: 29px;
      }

      .EsMove .houLiangD {
        position: absolute;
        left: 4px;
        top: 2px;
        animation: houLiangA 3s infinite;
        opacity: 0;
      }

      .EsMove .rightAn {
        position: absolute;
        bottom: 90px;
        left: 277px;
      }

      .EsMove .rightAn .houLiangD {
        animation: houLiangA 2.8s infinite;
      }

      .EsMove .rightAna {
        position: absolute;
        bottom: 90px;
        left: 216px;
      }

      .EsMove .rightAna .houLiangD {
        animation: houLiangA 2.1s infinite;
      }

      .EsMove .leftYd {
        position: absolute;
        top: 297px;
        left: 27px;
        animation: leftYd 2.4s linear infinite forwards;
      }

      .EsMove .leftYdA {
        position: absolute;
        top: 335px;
        left: 109px;
        animation: leftYdA 2.4s linear infinite forwards;
        opacity: 0;
      }

      .EsMove .rightLuj {
        position: absolute;
        top: 285px;
        right: 0;
      }

      .EsMove .rightYd {
        position: absolute;
        top: 331px;
        left: 418px;
        animation: rightYd 2.4s linear infinite forwards;
      }

      .EsMove .rightYdA {
        position: absolute;
        top: 274px;
        left: 319px;
        animation: rightYdA 2.4s linear infinite forwards;
        opacity: 0;
      }

      .EsMove .leftLing {
        position: absolute;
        left: 2px;
        top: 138px;
        width: 85px;
        height: 190px;
        background-image: url(./images/leftDi.png);
        background-position: center bottom;
        background-repeat: no-repeat;
      }

      .EsMove .guangA {
        position: absolute;
        left: 40px;
        top: 65px;
        animation: guangA 2.2s linear infinite;
      }

      .EsMove .guangB {
        position: absolute;
        left: 50px;
        top: 85px;
        animation: guangB 1.4s linear infinite;
      }

      .EsMove .guangC {
        position: absolute;
        left: 76px;
        top: 90px;
        animation: guangB 1.8s linear infinite;
      }

      .EsMove .guangD {
        position: absolute;
        left: 10px;
        top: 95px;
        animation: guangA 1.6s linear infinite;
      }

      .EsMove .leftLing .leftTbA {
        position: absolute;
        left: 14px;
        top: 72px;
        animation: leftTbA 2.2s infinite;
      }

      .EsMove .leftLing .leftTbB {
        position: absolute;
        left: 44px;
        top: 102px;
        animation: leftTbA 2.2s linear infinite;
      }

      .EsMove .rightLing {
        position: absolute;
        right: 2px;
        top: 175px;
        width: 84px;
        height: 190px;
        background-image: url(./images/rightDi.png);
        background-position: center bottom;
        background-repeat: no-repeat;
      }

      .EsMove .rightLing .guangC {
        left: 75px;
      }

      .EsMove .rightTbA {
        position: absolute;
        top: 61px;
        right: 46px;
        animation: rightTbA 2.2s linear infinite;
      }

      .EsMove .rightTbB {
        position: absolute;
        top: 85px;
        right: 16px;
        animation: rightTbA 1.8s infinite;
      }

      .EsMove .gucenter {
        position: absolute;
        left: 135px;
        top: 109px;
        width: 156px;
        height: 170px;
      }

      .EsMove .gucenter .centerA {
        position: absolute;
        top: 95px;
        left: 39px;
        animation: centerA 1.6s linear infinite forwards;
      }

      .EsMove .gucenter .guA {
        position: absolute;
        top: 41px;
        left: 9px;
        animation: guA 2.4s linear infinite forwards;
        opacity: 0;
      }

      .EsMove .gucenter .guB {
        position: absolute;
        top: 103px;
        left: 36px;
        animation: guB 2.4s linear infinite forwards;
        opacity: 0;
      }

      .EsMove .gucenter .guC {
        position: absolute;
        top: 82px;
        left: 53px;
        animation: guC 2.4s linear infinite forwards;
        opacity: 0;
      }

      .EsMove .gucenter .guD {
        position: absolute;
        top: 54px;
        left: 152px;
        animation: guB 2.4s linear infinite forwards;
        opacity: 0;
      }

      .EsMove .gucenter .guE {
        position: absolute;
        top: 51px;
        left: 139px;
        animation: guA 2.4s linear infinite forwards;
        opacity: 0;
      }

      .EsMove .gucenter .xiazai {
        position: absolute;
        top: 0;
        left: 26px;
        animation: xiazai 2.4s linear infinite forwards;
        opacity: 0;
      }

      .EsMove .ren {
        position: absolute;
        left: 301px;
        top: 319px;
      }

      .EsMove .xsPing {
        position: absolute;
        left: 250px;
        top: 294px;
        animation: xsPing 1.5s linear infinite;
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <div id="banner">
      <div class="maxCon">
        <div class="EsMove">
          <img class="rightLuj" src="./images/rightLuj.png" />
          <img class="rightYd" src="./images/rightYd.png" />
          <img class="rightYdA" src="./images/rightYdA.png" />
          
          <img class="bj" src="./images/moveBj.png" />
          <img class="houLiang houLiangA" src="./images/houLiang.png" />
          <img class="houLiang houLiangB" src="./images/houLiang.png" />
          <img class="houLiang houLiangC" src="./images/houLiang.png" />
          <div class="leftAn">
            <img src="./images/leftAn.png" />
            <img class="houLiangD" src="./images/leftLiang.png" />
          </div>
          <div class="rightAn">
            <img src="./images/rightAn.png" />
            <img class="houLiangD" src="./images/rightLiang.png" />
          </div>
          <div class="rightAna">
            <img src="./images/rightAn.png" />
            <img class="houLiangD" src="./images/rightLiang.png" />
          </div>
          

          <img class="leftYd" src="./images/leftYd.png" />
          <img class="leftYdA" src="./images/leftYdA.png" />
         

          <div class="leftLing">
            <img class="leftTbA" src="./images/leftTbA.png" />
            <img class="leftTbB" src="./images/leftTbB.png" />
            <img class="guangA" src="./images/guangA.png" />
            <img class="guangB" src="./images/guangA.png" />
            <img class="guangC" src="./images/guangA.png" />
            <img class="guangD" src="./images/guangA.png" />
          </div>
         
          <div class="rightLing">
            <img class="rightTbA" src="./images/rightTbA.png" />
            <img class="rightTbB" src="./images/rightTbB.png" />
            <img class="guangA" src="./images/guangA.png" />
            <img class="guangB" src="./images/guangA.png" />
            <img class="guangC" src="./images/guangA.png" />
            <img class="guangD" src="./images/guangA.png" />
          </div>
          

          <div class="gucenter">
            <img class="centerA" src="./images/centerA.png" />
            <img class="xiazai" src="./images/xiazai.png" />
            <img class="guA" src="./images/guangA.png" />
            <img class="guB" src="./images/guangA.png" />
            <img class="guC" src="./images/guangA.png" />
            <img class="guD" src="./images/guangA.png" />
            <img class="guE" src="./images/guangA.png" />
          </div>
          

          <img class="ren" src="./images/ren.png" />
          <img class="xsPing" src="./images/xsPing.png" />
        </div>
      </div>
    </div>
  </body>
</html>
